import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
// import 'package:my_flutter_three/04_%E8%B7%AF%E7%94%B1%E6%93%8D%E4%BD%9C/OrderDetail.dart';

class Orderlist extends StatefulWidget {
  const Orderlist({super.key});

  @override
  State<Orderlist> createState() => _OrderlistState();
}

class _OrderlistState extends State<Orderlist> {
  // 定义List存储数据
  List _orderList = [];

  @override
  void initState() {
    // 获取订单数据
    loadData();
    super.initState();
  }

  void loadData() async {
    // 1. 准备请求的地址
    String path = 'https://mock.boxuegu.com/mock/1172/orders';
    // 2. 创建http client
    Dio dio = Dio();
    // 3. 发送请求
    Response res = await dio.get(path);
    // 4. 刷新订单列表数据
    setState(() {
      _orderList = res.data;
    });
  }

  String getOrderState(int state) {
    String orderState = '待付款';
    switch (state) {
      case 1:
        orderState = '待付款';
        break;
      case 2:
        orderState = '待发货';
        break;
      case 3:
        orderState = '待收货';
        break;
      case 4:
        orderState = '待评价';
        break;
      default:
        orderState = '其它';
    }
    return orderState;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '网络请求-小案例',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      body: ListView.separated(
          itemBuilder: (BuildContext context, int index) {
            Map orderInfo = _orderList[index];
            return GestureDetector(
              // 点击事件执行函数
              onTap: () {
                // 路由跳转方式1
                // Navigator.push(context,
                //     MaterialPageRoute(builder: (BuildContext context) {
                //   return const OrderDetail();
                // }));

                // 路由跳转方式2
                Navigator.pushNamed(context, '/detail');
              },
              child: Container(
                padding: const EdgeInsets.all(15),
                child: Column(
                  children: [
                    // 2.1 日期 和 订单状态
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(orderInfo['createTime']),
                        Text(
                          getOrderState(orderInfo['orderState']),
                          style: const TextStyle(color: Colors.deepOrange),
                        )
                      ],
                    ),
                    // 2.2 图片 + 名称 + 数量 + 规格 + 单价
                    Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: Row(
                        children: [
                          // 2.2.1 左侧图片
                          Image.network(
                            orderInfo['image'],
                            width: 100,
                            height: 100,
                            fit: BoxFit.cover,
                          ),
                          // 2.2.2 右侧
                          Expanded(
                              child: Padding(
                            padding: const EdgeInsets.only(left: 8),
                            child: Column(
                              // 侧轴左对齐
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                // 右侧上部第一行
                                Row(
                                  children: [
                                    // 标题
                                    Expanded(child: Text(orderInfo['name'])),
                                    // 数量
                                    Padding(
                                      padding: const EdgeInsets.only(left: 8),
                                      child: Text('x ${orderInfo['totalNum']}'),
                                    )
                                  ],
                                ),
                                // 右侧第二行
                                Padding(
                                  padding: const EdgeInsets.only(top: 8),
                                  child: Container(
                                    padding: const EdgeInsets.only(
                                        left: 8, right: 8, top: 2, bottom: 2),
                                    decoration: BoxDecoration(
                                        color: const Color.fromARGB(
                                            255, 232, 228, 227),
                                        borderRadius: BorderRadius.circular(3)),
                                    child: Text(
                                      orderInfo['attrsText'],
                                      style: const TextStyle(
                                          color: Color.fromARGB(
                                              255, 111, 111, 111)),
                                    ),
                                  ),
                                ),
                                // 右侧第三行
                                Padding(
                                  padding: const EdgeInsets.only(top: 8),
                                  child: Text(
                                    "¥ ${orderInfo['curPrice']}",
                                  ),
                                )
                              ],
                            ),
                          )),
                        ],
                      ),
                    ),
                    // 3. 合计
                    Padding(
                      padding: const EdgeInsets.only(top: 8),
                      child: Container(
                        // color: Colors.red,
                        alignment: Alignment.centerRight,
                        child: Text(
                            '合计: ¥${orderInfo['curPrice'] * orderInfo['totalNum']}'),
                      ),
                    ),
                    // 4. 再次购买
                    Padding(
                      padding: const EdgeInsets.only(top: 8),
                      child: Container(
                          // color: Colors.red,
                          alignment: Alignment.centerRight,
                          child: Container(
                            padding: const EdgeInsets.only(
                                left: 5, right: 5, top: 3, bottom: 3),
                            decoration: BoxDecoration(
                                border: Border.all(
                                    color:
                                        const Color.fromARGB(255, 56, 55, 55)),
                                borderRadius: BorderRadius.circular(3)),
                            child: const Text(
                              '再次购买',
                              style: TextStyle(
                                  color: Color.fromARGB(255, 36, 31, 31)),
                            ),
                          )),
                    )
                  ],
                ),
              ),
            );
          },
          separatorBuilder: (BuildContext context, int index) {
            return Container(
              margin: const EdgeInsets.only(left: 9, right: 8),
              height: 1,
              color: const Color.fromARGB(255, 213, 212, 212),
            );
          },
          itemCount: _orderList.length),
    );
  }
}
